<script setup name="joinUs">
import { ref } from 'vue'
let wefareItmes =  ref([
  {
    title:'我们有',
    des:'一级行业赛道，广阔的市场前景，多领域的发展平台，自由平等的互联网氛围和共赢文化，高于行业的薪水和奖金，高级人才期权激励。',
    open:true,
  },
  {
    title:'还有',
    des:'校招管培生专属培养计划，定向mentor带教，专业技能充电，实践项目练兵，帮助你快速扎根直播行业，加入职业快车道！',
    open:false,
  },
  {
    title:'更有',
    des:'超大办公地、免费下午茶水果和晚餐供应、年度体检、月度团建，各种社团活动应有尽有，保留年轻人的精神领地。',
    open:false,
  }
])

/**
 * 福利按钮点击切换
 * @param index
 */
const showWefareClicked = (index) => {
  let arr = wefareItmes.value;
  arr[index].open = !arr[index].open;
}

</script>

<template>
  <div class="page-container">
    <div class="page-body">
      <div class="page-header">
        <div class="wefare">
          <div v-for="(item, index) in wefareItmes" class="wefare-item" :key="index">
            <p class="title">{{item.title}} <img :class="item.open ? 'pull-down-active' :'pull-down'" src="../../assets/pull_dwon.png" alt="" @click="showWefareClicked(index)"></p>
            <p class="des" v-if="item.open">{{item.des}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "join-us"
}
</script>

<style lang="scss" scoped>

.page-container {
  background-color: #fffaf4;
  padding: 50px;
  margin:0;
  box-sizing: border-box;
  border-radius: 15px;
}

.page-body {
  margin-left: auto;
  margin-right: auto;
}

.page-header {
  display: flex;
  align-items: center;
}

.wefare-item {
  margin-bottom: 40px;
  .title {
    color: #634e25;
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 8px;

    .pull-down, .pull-down-active {
      width: 15px;
      height: 15px;
      cursor: pointer;
    }

    .pull-down-active {
      transform: rotate(180deg);
    }
  }

  .des {
    color: #634e25;
    font-size: 16px;
    font-weight: 500;
  }
}

</style>
